<template>
	<div class="merchant">
		<div>
			<img src="../../assets/multiple/merchant.png" alt="">
		</div>
		<!-- 小模块 -->
		<div class="info-one">
			<div class="one-content">
				<img src="@/assets/multiple/merchant1.jpg">
				<div>
					<b>“互联网+”很美，但获取用户太贵？</b>
					<p>到位平台累计用户量接近1000万，完全开放，供入驻商家免费共享</p>
				</div>
			</div>
		</div>
		<div class="info-two">
			<div class="two-content">
				<div>
					<b>服务只覆盖少数地区，打广告太浪费？</b>
					<p>按商家的服务区域定向展示，精准提升品牌，轻松获取高质量订单</p>
				</div>
				<img src="@/assets/multiple/merchant2.jpg">
			</div>
		</div>
		<div class="info-one">
			<div class="one-content">
				<img src="@/assets/multiple/merchant3.jpg">
				<div>
					<b>服务太低频，用户留存低、回头太难？</b>
					<p>团结就是力量，低频+低频=高频，多种上门服务互推，回头客不难</p>
				</div>
			</div>
		</div>
		<div class="info-two">
			<div class="two-content">
				<div>
					<b>渠道太分散，各种渠道推广费时费力？</b>
					<p>入驻平台即加入“到位服务联盟”，直接让上数百个渠道帮您推广</p>
				</div>
				<img src="@/assets/multiple/merchant4.jpg">
			</div>
		</div>
		<div class="info-one">
			<div class="one-content">
				<img src="@/assets/multiple/merchant5.jpg">
				<div>
					<b>技术投入大、运营成本高、利润太低？</b>
					<p>到位免费提供完善的O2O管理平台，无需技术投入，节约大量成本</p>
				</div>
			</div>
		</div>


	</div>
	<!-- 合作信息 -->
	<div class="hz">
		<div>提交合作信息</div>

		<!-- 表单 -->
		<el-form style="width:600px ; margin:0 auto ;" ref="pointConfigRef" :model="merchant" :rules="rules"
			label-width="120px">
			<el-form-item label="商户类型" prop="mtype">
				<el-radio-group v-model="merchant.mtype">
					<el-radio label="企业店铺" />
					<el-radio label="个人店铺" />
				</el-radio-group>
			</el-form-item>
			<p class="p1">企业店铺需提供营业执照、对公账；个人店铺需提供相关从业资格证</p>

			<el-form-item label="店铺名称" prop="mname">
				<el-input v-model="merchant.mname" placeholder="请输入店铺名称" />
			</el-form-item>

			<el-form-item label="商户类型" prop="bus_class">
				<el-radio-group v-model="merchant.bus_class">
					<el-radio label="家庭保洁" />
					<el-radio label="上门按摩" />
					<el-radio label="上门维修" />
					<el-radio label="上门美业" />
					<el-radio label="洗衣洗护" />
					<el-radio label="搬家货运" />
					<el-radio label="家电清洗" />
					<el-radio label="鲜花绿植" />
					<el-radio label="家庭装修" />
					<el-radio label="养车用车" />
					<el-radio label="保姆月嫂" />
					<el-radio label="更多服务" />
				</el-radio-group>
			</el-form-item>

			<el-form-item label="联系电话" prop="phone">
				<el-input v-model="merchant.phone" placeholder="请输入手机号码" />
			</el-form-item>
			<el-form-item label="联系人" prop="linkman">
				<el-input v-model="merchant.linkman" placeholder="请输入联系人" />
			</el-form-item>
			<el-form-item label="服务城市" prop="serve_city">
				<el-input v-model="merchant.serve_city" placeholder="请输入服务城市" />
			</el-form-item>
			<el-form-item label="APP/公众号" prop="app">
				<el-input v-model="merchant.app" placeholder="请输入APP/公众号" />
			</el-form-item>
			<el-form-item label="公司网址" prop="web">
				<el-input v-model="merchant.web" placeholder="请输入网址" />
			</el-form-item>
			<span class="p2">审核通过后商务人员将与您电话联系，签订入驻合同，协助完善店铺内容</span>
			<div class="btmbox">
				<el-form class="btn" style="margin: 0 auto;color:#fff;">
					<el-button type="danger" @click="submit">立即提交入驻</el-button>
				</el-form>
				<p class="p3">招商电话：<span style="color:#ff0000;">010-53600316</span>（工作日9:00-18:00）</p>
			</div>
		</el-form>

	</div>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import httpApi from '@/http'
	import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus'


	const pointConfigRef = ref<FormInstance>()
	// 声明一个接口，定义商家入驻的所有属性
	const merchant = reactive({
		ctid: '',
		mtype: '',
		mname: '',
		bus_class: '',
		phone: '',
		linkman: '',
		serve_city: '',
		app: '',
		web: ''
	})

	const rules = reactive<FormRules>({
		mtype: [
			{
				required: true,
				message: '请选择类型',
				trigger: 'change',
			},
		],
		mname: [
			{ required: true, message: '请输入名称', trigger: 'blur' },
			{ min: 2, max: 10, message: '最少3~10位字符', trigger: 'blur' },
		],
		bus_class: [
			{
				required: true,
				message: '请选择类型',
				trigger: 'change',
			}],
		phone: [
			{ required: true, message: '请输入手机号', trigger: 'blur' },
			{

				pattern: /^1[3-9]\d{9}$/,
				message: "请输入正确的手机号",
				trigger: "blur",

			},
		],
		linkman: [
			{ required: true, message: '请输入联系人', trigger: 'blur' },
			// {pattern: /^\w{3,15}$/,
			// message: "1~15位字符，可以包含：数字、字母、下划线",
			// trigger: "blur",},
		],
		serve_city: [
			{ required: true, message: '请输入城市名称', trigger: 'blur' },
			{ min: 1, max: 5, message: '最少1~5位字符', trigger: 'blur' },
		],
		app: [
			{ required: true, message: '请输入公众号', trigger: 'blur' },
		],
		web: [
			{ required: true, message: '请输入名称', trigger: 'blur' },
		],
	})



	function submit() {

		const mtype = merchant.mtype
		const mname = merchant.mname
		const bus_class = merchant.bus_class
		const phone = merchant.phone
		const linkman = merchant.linkman
		const serve_city = merchant.serve_city
		const app = merchant.app
		const web = merchant.web

		let params = { mtype, mname, bus_class, phone, linkman, serve_city, app, web }
		console.log(params);
		if (params.mtype !== '' && params.mname !== '' && params.bus_class !== '' && params.phone !== '' && params.linkman !== '' && params.serve_city !== '' && params.app !== '' && params.web !== '') {
			ElMessageBox.confirm(
				'提交之后不可更改,确认提交吗?',
				{
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(() => {
				if (merchant.phone.length == 11) {
					httpApi.MerchanApi.enter(params).then(res => {
						console.log(res);
						if (res.data.code == 200) {
							ElMessage({
								type: 'success',
								message: '提交成功',
							})
							location.reload()
						} else {
							ElMessage.error('添加失败')
						}
					})
				}
			})
		} else {
			ElMessage.error('请检查信息是否输入正确')
			return
		}

	}
</script>

<style scoped lang="scss">
	.merchant {
		width: 1200px;
		margin: 0 auto;
		color: #666;
		font-size: 16px;

		img {
			display: block;
			width: 100%;
		}

		.info-one {
			.one-content {
				display: flex;

				img {
					object-fit: cover;
					width: 100px;
					margin: 20px 40px;
				}

				div {
					height: 100px;
					padding: 45px 0 0;

					p {
						font-size: 14px;
						color: #999;
						padding: 10px 0;
					}
				}

			}
		}

		.info-two {
			.two-content {
				display: flex;
				justify-content: end;

				img {
					object-fit: cover;
					width: 100px;
					margin: 20px 40px;
				}

				div {
					height: 100px;
					padding: 45px 0 0;

					p {
						font-size: 14px;
						color: #999;
						padding: 10px 0;
					}
				}

			}
		}


	}

	.hz {
		width: 800px;
		margin: 10px auto;
		background: #efefef;

		>div {

			font-size: 20px;
			font-weight: bold;
			width: 700px;
			height: 50px;
			margin: 0 auto;
			text-align: center;
			line-height: 50px;
		}

	}

	.p1 {
		color: #fb474f;
		padding: 0 0 15px 100px;
		font-size: 14px;
		font-family: '微软雅黑';
	}

	.p2 {
		font-size: 14px;
		padding: 0 0 15px 120px;
		color: #999
	}

	.btmbox {
		width: 700px;
		position: relative;

		.btn {
			position: absolute;
			right: 50%;
			transform: translate(40%, 50%);
			background-color: #ff0000;
			border-radius: 8px;
			color: #fff !important;

		}

		.p3 {
			text-align: center;
			padding: 70px 0;
			color: #898989;
			font-size: 12px;
		}

	}
</style>